<template>
	<view style="min-height: 1300rpx;background-color:  #F6F6F6;padding-top: 30rpx;">
		<view :class="{
			carp:true,
			carp1:index==0,
			carp2:index==1,
			carp3:index==2,
			carp4:index==3,
		}" v-for="(item,index) in 4">
			<view class="carp_1">
				<view :class="{
					carp_201:index==0,
					carp_202:index==1,
					carp_203:index==2,
					carp_204:index==3,
				}">
					<text>20</text>
					<text>元</text>
				</view>
				<view class="carp_3" :class="{
					carp_301:index==0,
					carp_302:index==1,
					carp_303:index==2,
					carp_304:index==3,
				}">
					满7元可用
				</view>

			</view>
			<view class="carp_2">
				<text>购物优惠券</text>
				<text>2021.08.08—2022.08.08</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.carp4 {
		background-image: url('@/static/img/g4.png');
	}

	.carp1 {
		background-image: url('@/static/img/g1.png');
	}

	.carp2 {
		background-image: url('@/static/img/g2.png');
	}

	.carp3 {
		background-image: url('@/static/img/g3.png');
	}

	.carp {
		width: 92%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: auto;
		height: 180rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-bottom: 20rpx;

		.carp_2 {
			width: 50%;

			text:nth-of-type(2) {
				font-size: 20rpx;
				font-family: HarmonyOS Sans;
				font-weight: 400;
				color: #7B7B7B;
				margin-top: 10rpx;
				opacity: 1;
			}

			text:nth-of-type(1) {
				display: block;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				opacity: 1;
			}
		}

		.carp_1 {
			.carp_301 {
				border: 1rpx solid #FFD040;
				color: #FFD040;
			}

			.carp_302 {
				border: 1rpx solid #5BC1F5;
				color: #5BC1F5;
			}

			.carp_303 {
				border: 1rpx solid #38C9B3;
				color: #38C9B3;
			}

			.carp_304 {
				border: 1rpx solid #A384FC;
				color: #A384FC;
			}

			.carp_3 {
				display: inline-block;

				padding: 2rpx 5rpx 2rpx 5rpx;
				border-radius: 4rp;
				font-size: 23rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				opacity: 1;
			}

			.carp_204 {
				text:nth-of-type(2) {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #A384FC;
					opacity: 1;
				}

				text:nth-of-type(1) {
					font-size: 68rpx;
					font-family: HarmonyOS Sans;
					font-weight: 500;
					color: #A384FC;
					opacity: 1;
				}
			}

			.carp_203 {
				text:nth-of-type(2) {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #38C9B3;
					opacity: 1;
				}

				text:nth-of-type(1) {
					font-size: 68rpx;
					font-family: HarmonyOS Sans;
					font-weight: 500;
					color: #38C9B3;
					opacity: 1;
				}
			}

			.carp_202 {
				text:nth-of-type(2) {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #5BC1F5;
					opacity: 1;
				}

				text:nth-of-type(1) {
					font-size: 68rpx;
					font-family: HarmonyOS Sans;
					font-weight: 500;
					color: #5BC1F5;
					opacity: 1;
				}
			}

			.carp_201 {
				text:nth-of-type(2) {
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFD040;
					opacity: 1;
				}

				text:nth-of-type(1) {
					font-size: 68rpx;
					font-family: HarmonyOS Sans;
					font-weight: 500;
					color: #FFD040;
					opacity: 1;
				}
			}


		}
	}
</style>
